<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="/css/bootstrap.min.css" rel="stylesheet">
        <link href="/css/font-awesome.css" rel="stylesheet">
        <link href="/css/datatables.min.css" rel="stylesheet">
        <link href="/css/animate.css" rel="stylesheet">
        <link href="/css/style.css" rel="stylesheet">
        <script src="/js/jquery-3.1.1.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        <script src="/js/vue.js"></script>
    </head>
    <body style="background-color:whitesmoke">
        <div id="settle">
            <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-10">
                    <h2>日结算明细表</h2>
                    <ol class="breadcrumb">
                        <li>
                            <a href="index.html">日结算明细表</a>
                        </li>
                        <li>
                            <a>日结算明细表</a>
                        </li>
                        <li class="active">
                            <strong>日结算明细表</strong>
                        </li>
                    </ol>
                </div>
            </div>

            <div class="wrapper wrapper-content animated fadeInRight">

                <div class="ibox-content m-b-sm border-bottom">
                    <div class="row">
                        <form role="form" class="form-horizontal">
                            <div class="form-group">

                                <label class=" col-sm-2 control-label">编号</label>
                                <div class=" col-sm-2">
                                    <input type="text" class="form-control" v-model="settleQuery.settleId"
                                           placeholder="请输入编号">
                                </div>


                                <div>
                                    <button class="btn btn-primary btn-sm" type="button" @click="loadData()"><span
                                            class="glyphicon glyphicon-zoom-in"></span> 查询
                                    </button>
                                    <button class="btn btn-primary btn-sm" type="button" @click="add()"><span
                                            class="glyphicon glyphicon-plus"></span> 新增
                                    </button>
                                </div>
                            </div>
                        </form>

                    </div>

                </div>
                <div class="row">
                    <div class="col-lg-12">

                        <div class="ibox float-e-margins">

                            <div class="ibox-content">

                                <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
                                    <thead>
                                        <tr>

                                            <th data-toggle="true">编号</th>
                                            <th data-hide="all">当天结算收入</th>
                                            <th data-hide="phone">挂账数量</th>
                                            <th data-hide="phone">开桌人数</th>
                                            <th data-hide="phone">各部门营业收入</th>
                                            <th class="text-right" data-sort-ignore="true">操作</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="x in list">
                                            <td>{{x.settleId}}</td>
                                            <td>{{x.settleIncome}}</td>
                                            <td>{{x.settleCount}}</td>
                                            <td>{{x.settleNum}}</td>
                                            <td>{{x.departmentIncome}}</td>
                                            <td class="text-right">

                                                <button class="btn-primary btn btn-sm" @click="update(x)"><span
                                                        class="glyphicon glyphicon-tag"></span> 编辑
                                                </button>
                                                <button class="btn-primary btn btn-sm" @click="del(x)"><span
                                                        class="glyphicon glyphicon-trash"></span> 删除
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <div>
                                    一共{{total}}条数据,一共{{totalPage}}页,当前第{{curPage}}页
                                    <button class="btn btn-success btn-sm" type="button" @click="prePages()">上一页
                                    </button>
                                    <button class="btn btn-success btn-sm" type="button" @click="nextPages()">下一页
                                    </button>
                                    <button class="btn btn-success btn-sm" type="button" @click="indexPage()">首页
                                    </button>
                                    <button class="btn btn-success btn-sm" type="button" @click="endPage()">尾页</button>
                                    跳转到<input type="number" id="num" style="width: 40px" min="1" max="10"
                                              v-model="selectPage" @keyup="valNum">页
                                    <button class="btn btn-success btn-sm" type="button" @click="changePage()">跳转
                                    </button>
                                    <select v-model="settleQuery.row" @change="selectRow">
                                        <option value="3">每页3条</option>
                                        <option value="5">每页5条</option>
                                        <option value="10">每页10条</option>
                                    </select>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 模态框开始 -->
            <div id="one" class="modal fade" style="top:200px">
                <div class="modal-dialog">

                    <div class="modal-content">
                        <!--头部-->
                        <div class="modal-header">
                            <h4 align="center">{{title}}</h4>

                        </div>
                        <!--主题内容-->
                        <div class="modal-body">
                            <form role="form" class="form-horizontal">

                                <!--<div class="form-group">
                                    <label class=" col-sm-2 control-label">编号</label>
                                    <div class=" col-sm-10">
                                        <input type="text" class="form-control" v-model="settle.settleId"
                                               placeholder="请输入编号">
                                    </div>
                                </div>-->

                                <div class="form-group">
                                    <label class=" col-sm-2 control-label">当天结算收入</label>
                                    <div class=" col-sm-10">
                                        <input type="text" class="form-control" v-model="settle.settleIncome"
                                               placeholder="请输入当天收入">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class=" col-sm-2 control-label">挂账数量</label>
                                    <div class=" col-sm-10">
                                        <input type="text" class="form-control" v-model="settle.settleCount"
                                               placeholder="请输入挂账数量">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class=" col-sm-2 control-label">开桌人数</label>
                                    <div class=" col-sm-10">
                                        <input type="text" class="form-control" v-model="settle.settleNum"
                                               placeholder="请输入开桌人数">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class=" col-sm-2 control-label">各部门营业收入</label>
                                    <div class=" col-sm-10">
                                        <input type="text" class="form-control" v-model="settle.departmentIncome"
                                               placeholder="请输入各部门营业收入">
                                    </div>
                                </div>

                            </form>
                        </div>

                        <!--底部-->
                        <div class="modal-footer">
                            <button class="btn btn-primary btn-sm" type="button" @click="closeWin()"><span
                                    class="glyphicon glyphicon-remove"></span>关闭
                            </button>
                            <button class="btn btn-primary btn-sm" @click="saveSettle"><span
                                    class="glyphicon glyphicon-save"></span>保存
                            </button>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </body>

    <script>

        new Vue({
            el: "#settle",
            data: {
                list: [],
                total: 0,//总条数
                totalPage: 0,//总页数
                selectPage: 1,//选择页数
                settleQuery: { //查询对象
                    page: 1,
                    row: 3,
                    settleId: null,
                    settleIncome: '',
                    settleCount: '',
                    settleNum: '',
                    departmentIncome: ''
                },
                prePage: 0,//上一页
                nextPage: 0,//下一页.
                curPage: 0,//当前页
                settle: {
                    settleId: 0,
                    settleIncome: "",
                    settleCount: "",
                    settleNum: "",
                    departmentIncome: ""
                },
                title: "用户修改"


            },
            methods: {
                loadData: function () {
                    var self = this;
                    $.ajax({
                        url: "/settle/settleList",//请求地址
                        type: "get",
                        data: self.settleQuery,
                        dataType: "json",//返回的数据类型
                        success: function (data) {
                            console.log(data);
                            self.list = data.list;
                            self.total = data.total;
                            self.totalPage = data.totalPage;
                            self.prePage = data.prePage;
                            self.nextPage = data.nextPage;
                            self.curPage = data.curPage;


                        }

                    })
                },
                prePages: function () {//上一页
                    this.settleQuery.page = this.prePage;
                    //刷新
                    this.loadData();

                },
                nextPages: function () {
                    this.settleQuery.page = this.nextPage;
                    //刷新
                    this.loadData();

                },
                indexPage: function () {//首页
                    this.settleQuery.page = 1
                    //刷新
                    this.loadData();

                },
                endPage: function () {//尾页
                    this.settleQuery.page = this.totalPage;
                    //刷新
                    this.loadData();

                },
                changePage: function () {//跳转
                    if (this.selectPage > this.totalPage) {
                        this.settleQuery.page = this.totalPage;
                    } else {
                        this.settleQuery.page = this.selectPage;
                    }
                    //刷新
                    this.loadData();

                },
                selectRow: function () {//选择条数
                    this.settleQuery.page = 1
                    //刷新
                    this.loadData();

                },
                valNum: function () {
                    //定义正则表达式对象
                    var dd = /^[\u4e00-\u9fa5]{0,}$/
                    //如果输入的汉字，就显示1
                    if (dd.test(this.selectPage)) {
                        this.selectPage = 1
                    } else {
                        console.log("==" + this.selectPage)
                        //如果输入的值大于总页数，就回到最大值
                        if (this.selectPage > this.totalPage) {
                            this.selectPage = this.totalPage;
                        }
                    }


                },
                update: function (x) {//打开修改模态框
                    $("#one").modal("show")
                    //数据回显
                    this.settle = x;

                    this.title = "用户修改";

                },
                add: function () {//打开新增模态框
                    $("#one").modal("show")
                    this.title = "用户新增";
                    //清空
                    this.settle.settleId = null;
                    this.settle.settleIncome = "";
                    this.settle.settleCount = "";
                    this.settle.settleNum = "";
                    this.settle.departmentIncome = ""
                },
                saveSettle: function () {//保存
                    var url = "";
                    if (this.title == "用户修改") {
                        url = "/settle/update";
                    } else {
                        url = "/settle/add";
                    }
                    var self = this;
                    console.log(url);
                    $.ajax({
                        url: url,
                        type: "post",
                        contentType: "application/x-www-form-urlencoded",
                        data: self.settle,
                        dataType: "json",
                        success: function (data) {
                            console.log(data);
                            alert(data.info);
                            if (data.info == "保存成功") {
                                //关闭模态框
                                $("#one").modal("hide")
                                //刷新
                                self.loadData();
                            }
                        }


                    })

                },
                closeWin: function () {//关闭模态框
                    $("#one").modal("hide")
                }


            },
            mounted() {
                //运行loadData函数
                this.loadData();
            }
        })


    </script>
</html>
